import React, { Component} from 'react';
import '../../Stylesheets/wx/agent.css'
import Top from '../CommonComponent/Top'
import Tip from '../CommonComponent/Tip'
import Split from '../CommonComponent/Split'
import AgentCom from '../OrderManage/AgentCom'
import {StatisInfo} from '../../Action/auth';

export default class AgentStructure extends Component {
    // 构造
    constructor(props) {
        super(props);


        // 初始状态
        this.state = {
            showState1:['block','none'],
            showState2:['none','none'],
            statisMsg:[],
            infoList:[],
            nextInfoList:[]
        };
    }
    /*toggle1(index){
        var state = (this.state.showState1[index]=='block')?'none':'block';
        this.state.showState1.splice(index,1,state)
        this.setState({
            showState1:this.state.showState1
        });
    }
    toggle2(index){
        var state = (this.state.showState2[index]=='block')?'none':'block';
        this.state.showState2.splice(index,1,state)
        this.setState({
            showState2:this.state.showState2
        });
    }*/

    componentDidMount() {
        this.getStatisInfo()
    }

    //获取代理列表
    async getStatisInfo(){
        await StatisInfo()
            .then(res=>{
                this.setState({statisMsg:res.head})
                this.setState({infoList:res.detail})
            })
            .catch(err=>{
                console.warn('获取信息失败',err)
            })
    }


    render(){
        const {showState1,showState2,infoList,statisMsg,nextInfoList} = this.state;
        return(
            <div>
                <Top
                    title = {'代理结构图'}
                />
                <div className="containerNav bg" style={{top:50}}>
                    <Split />
                    <Tip
                        img = {require('../../Images/common/prompt.png')}
                        title = {'提示:点击代理商姓名可查看代理详细信息'}
                        //styleSheet={{background:'#fff1f0'}}
                    />
                    <div className='padd10 color6 bgk_fff f14' style={{marginBottom:10}}>
                        <p><span className="di tr width_90">当前品牌为：</span><span className="di pl">维魅力</span></p>
                        {
                            statisMsg&&statisMsg.map(el=>{
                                return(
                                    <p>
                                        <span className="di tr width_90">{el.GRADE_DESC}：</span>
                                        <span className="di pl">
                                            {/*<span className="di bgpalepink bgprogress" style={{width:15}}>a</span>*/}
                                            <span className="di" style={{paddingLeft:5}}>{el.countAcc}</span>
                                        </span>
                                    </p>
                                )
                            })
                        }
                    </div>
                    <div className="color6 border_bottom bgk_fff plr flex flex-align-center flex-pack-justify f14" style={{height:50}}>
                        <span>代理姓名</span>
                        <span>下级代理个数</span>
                    </div>
                    <div className="bgk_fff">
                        {
                            infoList == ''?
                                <div className="tc colorlv f14" style={{height:30,lineHeight:'30px'}}>暂无数据哦~</div>
                                :
                            infoList&&infoList.map((el,index)=>{
                                return(
                                    <AgentCom
                                        num = {6}
                                        data={el}
                                    />
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }

}